<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Devices Status</title>
    <script type="text/javascript">
        function sendMessage(clientId) {
            var topic = prompt("Enter topic:");
            var message = prompt("Enter message:");
            if (topic && message) {
                var form = document.createElement("form");
                form.method = "post";
                form.action = "/sendmsg";

                var inputClientId = document.createElement("input");
                inputClientId.type = "hidden";
                inputClientId.name = "clientId";
                inputClientId.value = clientId;
                form.appendChild(inputClientId);

                var inputTopic = document.createElement("input");
                inputTopic.type = "hidden";
                inputTopic.name = "topic";
                inputTopic.value = topic;
                form.appendChild(inputTopic);

                var inputMessage = document.createElement("input");
                inputMessage.type = "hidden";
                inputMessage.name = "message";
                inputMessage.value = message;
                form.appendChild(inputMessage);

                document.body.appendChild(form);
                form.submit();
            }
        }
    </script>
</head>
<body>
<h1>Devices Status</h1>

<!-- 显示分页列表 -->
<table>
    <thead>
    <tr>
        <th>序号</th>
        <th>Status</th>
        <th>Username</th>
        <th>ClientId</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <!-- 使用 Thymeleaf 渲染分页数据 -->
    <tr th:each="device, iterStat : ${devicesPage.records}">
        <td th:text="${iterStat.count}"></td>
        <td th:text="${device.status == 1 ? '在线' : '离线'}"></td>
        <td th:text="${device.userName}"></td>
        <td th:text="${device.clientId}"></td>
        <td>
            <button type="button" onclick="sendMessage([[${device.clientId}]])">Send Message</button>
        </td>
    </tr>
    </tbody>
</table>

<!-- 分页控制 -->
<div>
    <a th:href="@{/devices(page=${devicesPage.current - 1}, size=${devicesPage.size})}" th:if="${devicesPage.current > 1}">Previous</a>
    <span th:text="${devicesPage.current}">1</span>
    <a th:href="@{/devices(page=${devicesPage.current + 1}, size=${devicesPage.size})}" th:if="${devicesPage.current < devicesPage.pages}">Next</a>
</div>
</body>
</html>
